import axios from 'axios'
import {
  colorLighted,
  colorDarken,
  colorHexToRgb,
  colorRgbToHex,
  colorRgbToHsl,
  colorHslToRgb,
} from '@vimi/utils-tool'
import { BASE_URL_LIBS } from '@/common/plugins/constant'

const originalColor = '#42bd56'
const elementUrl = `${BASE_URL_LIBS}/element-ui/2.9.1/theme-chalk/index.css`
const bootstrapUrl = `${BASE_URL_LIBS}/bootstrap/4.1.3/css/bootstrap.min.css`

export const themeChange = color => {
  return new Promise((resolve, reject) => {
    if (typeof color !== 'string') {
      return reject(new Error())
    }
    Promise.all([updateElementStyle(color), updateBootstrapStyle(color)])
      .then(() => resolve())
      .catch(() => reject(new Error()))
  })
}

const updateElementStyle = color => {
  return new Promise((resolve, reject) => {
    axios
      .get(elementUrl)
      .then(res => {
        const themeCluster = getElementUiCluster(color.replace('#', ''))
        const originalCluster = getElementUiCluster(originalColor.replace('#', ''))
        const newStyle = updateStyle(res.data, originalCluster, themeCluster)
        updateTag('element-style', newStyle)
      })
      .then(() => resolve())
      .catch(() => reject(new Error()))
  })
}

const updateBootstrapStyle = color => {
  return new Promise((resolve, reject) => {
    axios
      .get(bootstrapUrl)
      .then(res => {
        const themeCluster = getBootstrapCluster(color.replace('#', ''))
        const originalCluster = getBootstrapCluster(originalColor.replace('#', ''))
        const newStyle = updateStyle(res.data, originalCluster, themeCluster)
        updateTag('bootstrap-style', newStyle)
      })
      .then(() => resolve())
      .catch(() => reject(new Error()))
  })
}

const updateTag = (id, innerText) => {
  let styleTag = document.getElementById(id)
  if (!styleTag) {
    styleTag = document.createElement('style')
    styleTag.setAttribute('id', id)
    document.head.appendChild(styleTag)
  }
  styleTag.innerText = innerText
}

const updateStyle = (style = '', oldCluster, newCluster) => {
  let newStyle = style.replace(/@font-face{[^}]+}/, '')
  oldCluster.forEach((color, index) => {
    newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
  })
  return newStyle
}

const getBootstrapCluster = theme => {
  const clusters = [`#${theme}`]
  const [r, g, b] = colorHexToRgb(theme)
  const [h, s, l] = colorRgbToHsl(r, g, b)

  const useClu = [0.05, 0.075, 0.1, 0.125, 0.15]
  useClu.forEach(i => {
    const [r2, g2, b2] = colorHslToRgb(h, s, l - i)
    clusters.push(colorRgbToHex(r2, g2, b2))
  })

  // 按钮focus状态
  const [r3, g3, b3] = colorHslToRgb(h, s, l + 0.075)
  clusters.push(`${r3},${g3},${b3}`)

  return clusters
}

const getElementUiCluster = theme => {
  const clusters = [`#${theme}`]
  const [r, g, b] = colorHexToRgb(theme)
  for (let i = 0; i <= 9; i++) {
    clusters.push(colorRgbToHex(...colorLighted(r, g, b, Number((i / 10).toFixed(2)))))
  }
  clusters.push(colorRgbToHex(...colorDarken(r, g, b, 0.1)))
  return clusters
}
